<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }

        li {
            list-style: none;
        }

        .box1 {
            margin: 100px;

        }
        .box{
            height: 100px;
        }

        @keyframes circle {
            0% {
                transform: rotate(0deg);
            }
            50% {
                transform: rotate(180deg);
            }
            100% {
                transform: rotate(360deg);
            }
        }

        li {
            float: left;
            width: 0;
            height: 0;
            border-style: solid;
            border-width: 50px;
            border-radius: 50%;
            margin: auto;
            animation: circle 5s infinite linear;
            border-color: blue green red orangered;

        }

        /*#one {*/

            /*border-color: transparent green transparent transparent;*/
        /*}*/

        /*#two {*/

            /*border-color: transparent transparent blue transparent;*/
        /*}*/

        /*#three {*/

            /*border-color: red transparent transparent transparent;*/
        /*}*/

        /*#four {*/

            /*border-color: transparent transparent transparent orange;*/
        /*}*/
    </style>
</head>
<body>
<div class="box1">
    <div class="box">
        <ul>
            <li id="one"></li>
            <li id="two"></li>
        </ul>
    </div>
    <div class="box">
        <ul>
            <li id="three"></li>
            <li id="four"></li>
        </ul>
    </div>
</div>
</body>
</html>